{{define "body"}}


<div class="col-md-12">
    <div id='upShowID' class="uploader col-md-12 clo-xs-12" data-ride="uploader" data-url="/app/upload.php">
        <div class="uploader-message text-center">
            <div class="content"></div>
            <button type="button" class="close">x</button>
        </div>
        <div class="uploader-files file-list file-list-lg file-rename-by-click"
             data-drag-placeholder="选择文件/Ctrl+V粘贴/拖拽至此处" style="min-height: 188px; border-style: dashed;"></div>
        <div class="uploader-actions">
            <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
            <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传
            </button>
            <button type="button" class="btn btn-link uploader-btn-stop"><i class="icon icon-pause"></i> 暂停上传</button>
            <div class="uploader-status pull-right text-muted hidden-xs"></div>
            <div class="uploader-status pull-right text-muted col-xs-12 text-ellipsis visible-xs"></div>
        </div>
    </div>
    <div class="col-md-12 clo-xs-12">
        <ul class="nav nav-tabs">
            <li data-toggle="tooltip" title="图片直链">
                <a href="#" data-target="#tab2Content1" data-toggle="tab"><i class="icon icon-picture"></i></a>
            </li>
            <li data-toggle="tooltip" title="论坛代码">
                <a href="#" data-target="#tab2Content2" data-toggle="tab"><i class="icon icon-chat"></i></a>
            </li>
            <li class="active" data-toggle="tooltip" title="Markdown">
                <a href="#" data-target="#tab2Content3" data-toggle="tab"><i class="icon icon-code"></i></a>
            </li>
            <li data-toggle="tooltip" title="HTML链接">
                <a href="#" data-target="#tab2Content4" data-toggle="tab"><i class="icon icon-html5"></i></a>
            </li>
            <li data-toggle="tooltip" title="缩略图">
                <a href="#" data-target="#tab2Content5" data-toggle="tab"><i class="icon icon-camera"></i></a>
            </li>
            <li data-toggle="tooltip" title="删除链接">
                <a href="#" data-target="#tab2Content6" data-toggle="tab"><i class="icon icon-trash"></i></a>
            </li>
        </ul>
        <div class="tab-content" style="text-align:right;">
            <div class="tab-pane fade " id="tab2Content1">
                <textarea class="form-control" rows="5" id="links" readonly></textarea>
                <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                        class="icon icon-undo"></i> 刷新网页
                </button>
                <button id="btnLinks" class="btn btn-primary copyBtn1" data-loading-text="已经复制链接..."
                        style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                </button>
            </div>
            <div class="tab-pane fade " id="tab2Content2">
                <textarea class="form-control" rows="5" id="bbscode" readonly></textarea>
                <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                        class="icon icon-undo"></i> 刷新网页
                </button>
                <button id="btnBbscode" class="btn btn-primary copyBtn2" data-loading-text="已经复制链接..."
                        style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                </button>
            </div>
            <div class="tab-pane fade active in" id="tab2Content3">
                <textarea class="form-control" rows="5" id="markdown" readonly></textarea>
                <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                        class="icon icon-undo"></i> 刷新网页
                </button>
                <button id="btnMarkDown" class="btn btn-primary copyBtn3" data-loading-text="已经复制链接..."
                        style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                </button>
            </div>
            <div class="tab-pane fade " id="tab2Content4">
                <textarea class="form-control" rows="5" id="html" readonly></textarea>
                <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                        class="icon icon-undo"></i> 刷新网页
                </button>
                <button id="btnHtml" class="btn btn-primary copyBtn4" data-loading-text="已经复制链接..."
                        style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                </button>
            </div>
            <div class="tab-pane fade " id="tab2Content5">
                <textarea class="form-control" rows="5" id="thumb" readonly></textarea>
                <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                        class="icon icon-undo"></i> 刷新网页
                </button>
                <button id="btnThumb" class="btn btn-primary copyBtn5" data-loading-text="已经复制链接..."
                        style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                </button>
            </div>
            <div class="tab-pane fade " id="tab2Content6">
                <textarea class="form-control" rows="5" id="del" readonly></textarea>
                <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                        class="icon icon-undo"></i> 刷新网页
                </button>
                <button id="btnDel" class="btn btn-primary copyBtn6" data-loading-text="已经复制链接..."
                        style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                </button>
            </div>
        </div>
    </div>
</div>
<link href="/static/marquee/marquee.css" rel="stylesheet">
<link href="/static/zui/lib/uploader/zui.uploader.min.css" rel="stylesheet">
<script src="/static/zui/lib/uploader/zui.uploader.min.js"></script>
<script src="/static/marquee/marquee.min.js"></script>
<script src="/static/index.js"></script>
<script>
    // 上传控制
    $('#upShowID').uploader({
        // 自动上传
        autoUpload: false,
        // 文件上传提交地址
        url: '/upload',
        // 最大支持的上传文件
        max_file_size: 25165824,
        // 分片上传 0为不分片 分片容易使图片上传失败
        chunk_size: 0,
        // 点击文件列表上传文件
        browseByClickList: true,
        // flash 上传组件地址
        flash_swf_url: '/static/zui/lib/uploader/Moxie.swf',
        // silverlight 上传组件地址
        flash_swf_url: '/static/zui/lib/uploader/Moxie.xap',
        // sign
        multipart_params: {
            'sign': Date.now() / 1000,
        },
        // 预览图尺寸
        previewImageSize: {
            'width': 80,
            'height': 80
        },
        // 上传格式过滤
        filters: { // 只允许上传图片或图标（.ico）
            mime_types: [{
                title: '图片',
                extensions: 'jpg,jpeg,png,gif,bmp,webp,ico,jfif,tif,tga'
            },
                {
                    title: '图标',
                    extensions: 'ico'
                }
            ],
            prevent_duplicates: true
        },
        // 限制文件上传数目
        limitFilesCount: 30,
        // 重置上传失败的文件
        autoResetFails: true,
        file_data_name: 'file',
        responseHandler: function (responseObject, file) {
            var obj = JSON.parse(responseObject.response); //由JSON字符串转换为JSON对象

            if (obj.result === 'success') {
                document.getElementById("links").innerHTML += obj.url + "\r\n";
                document.getElementById("bbscode").innerHTML += "[img]" + obj.url + "[/img]\r\n";
                document.getElementById("markdown").innerHTML += "![" + obj.srcName + "](" + obj.url + ")\r\n";
                document.getElementById("html").innerHTML += '<img src="' + obj.url + '" alt="' + obj.srcName + '" />\r\n';
                document.getElementById("thumb").innerHTML += obj.thumb + "\r\n";
                document.getElementById("del").innerHTML += obj.del + "\r\n";

                new $.zui.Messager(obj.srcName + "上传成功", {
                    type: "primary", // 定义颜色主题
                    placement: 'bottom-right',
                    icon: "check" // 定义消息图标
                }).show();
            } else {
                return '上传失败,错误信息:' + obj.message;
            }

            try { // 储存上传历史
                console.log('localStorage ok!');
                $.zui.store.set(obj.srcName, obj)
            } catch (err) {
                console.log('localStorage failed:' + err);
            }
        }
    });
</script>
{{end}}